<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/layout.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/managementLayout.css">
    <script src="${pageContext.request.contextPath}/js/jquery1.12.4.js"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap.js"></script>
    <script src="${pageContext.request.contextPath}/js/monitor.js"></script>
    <script src="${pageContext.request.contextPath}/js/slider.js"></script>
    <script src="${pageContext.request.contextPath}/js/vue.js"></script>
    <script src="${pageContext.request.contextPath}/js/axios.min.js"></script>
    <title>课程管理</title>
    <style>
        /*点击删除按钮后弹出的层*/
        .zhezhao {
            display: none;          /* 修改这里可以让遮罩层消失*/
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #000;
            opacity: 0.7;
            filter: alpha(opacity=70);
            overflow: hidden;
        }
        .remove{
            display: none;       /* 修改这里可以让删除框消失*/
            width: 400px;
            height: 190px;
            position: absolute;
            top: 200px;
            left:500px;
            background: #fff;
            border-radius: 4px;
        }
        .removerChid{
            margin: 4px;
            border: 1px solid #ccc;
        }
        .removerChid h2{
            padding-left: 8px;
            font-size: 14px;
            line-height: 30px;
            margin: 4px 8px;
            border-bottom: 1px solid #99cc33;
        }
        .removeMain{
            margin-top: 38px;
            text-align: center;
            margin-bottom: 30px;
            border-radius: 4px;
        }
        .removeMain a{
            padding: 0 20px;
            display: inline-block;
            height: 30px;
            line-height: 30px;
            border-radius: 4px;
            border: 1px solid #5e8809;
            margin-top: 30px;
            background: #99cc33;
            color: #fff;
        }
        .removeMain a:hover,.removeMain a:active{
            background: #679016;

        }
    </style>
</head>

<body>

<div id="container">
    <section class="public-main">
        <jsp:include page="NavigationUtil.jsp" flush="true"></jsp:include>
<%--        <div class="sidebar public-main-left">--%>
<%--            <ul class="sidebar-menu">--%>
<%--                <!-- <li class="header">主导航</li> -->--%>
<%--                <li class='sidebar-menu-header'>--%>
<%--                    <img src='${pageContext.request.contextPath}/./img/logo.png' />--%>
<%--                    <span>后台管理系统</span>--%>
<%--                </li>--%>
<%--                <li class="treeview">--%>
<%--                    <a href="index.html">--%>
<%--                        <i class="fa fa-dashboard"></i> <span>主  页</span> <i class="fa fa-angle-right pull-right"></i>--%>
<%--                    </a>--%>
<%--                </li>--%>
<%--                <li class="header">后台管理</li>--%>
<%--                <li class="treeview">--%>
<%--                    <a href="#">--%>
<%--                        <i class="fa fa-dashboard"></i> <span>系统管理</span> <i class="fa fa-angle-right pull-right"></i>--%>
<%--                    </a>--%>
<%--                    <ul class="treeview-menu">--%>
<%--                        <li><a href="#"><i class="fa fa-circle-o"></i>用户管理</a></li>--%>
<%--                        <li><a href="#"><i class="fa fa-circle-o"></i>菜单管理</a></li>--%>
<%--                        <li><a href="#"><i class="fa fa-circle-o"></i>角色管理</a></li>--%>
<%--                        <li><a href="#"><i class="fa fa-circle-o"></i>权限管理</a></li>--%>
<%--                    </ul>--%>
<%--                </li>--%>
<%--                <li class="treeview">--%>
<%--                    <a href="#">--%>
<%--                        <i class="fa fa-files-o"></i>--%>
<%--                        <span>课程管理</span>--%>
<%--                        <span class="label label-primary pull-right">4</span>--%>
<%--                    </a>--%>
<%--                    <ul class="treeview-menu" style="display: none;">--%>
<%--                        <li><a href="showCourseList"><i class="fa fa-circle-o"></i> 课程列表</a></li>--%>
<%--                        <li><a href="showCourseStyleList"><i class="fa fa-circle-o"></i> 分类管理</a></li>--%>
<%--                    </ul>--%>
<%--                </li>--%>
<%--                <li class="treeview">--%>
<%--                    <a href="#">--%>
<%--                        <i class="fa fa-pie-chart"></i>--%>
<%--                        <span>订单管理</span>--%>
<%--                        <i class="fa fa-angle-right pull-right"></i>--%>
<%--                    </a>--%>
<%--                    <ul class="treeview-menu">--%>
<%--                        <li><a href="#"><i class="fa fa-circle-o"></i> 订单详情</a></li>--%>
<%--                        <li><a href="#"><i class="fa fa-circle-o"></i> 支付功能</a></li>--%>
<%--                    </ul>--%>
<%--                </li>--%>
<%--                <li class="treeview">--%>
<%--                    <a href="#">--%>
<%--                        <i class="fa fa-laptop"></i>--%>
<%--                        <span>智能客服</span>--%>
<%--                        <i class="fa fa-angle-right pull-right"></i>--%>
<%--                    </a>--%>
<%--                    <ul class="treeview-menu">--%>
<%--                        <li><a href="#"><i class="fa fa-circle-o"></i> 客服问答</a></li>--%>
<%--                        <li><a href="#"><i class="fa fa-circle-o"></i> 投诉建议</a></li>--%>
<%--                    </ul>--%>
<%--                </li>--%>

<%--                <li class="header">前台管理</li>--%>
<%--                <li><a href="#"><i class="fa fa-circle-o text-red"></i> <span>轮播图片</span></a></li>--%>
<%--                <li><a href="#"><i class="fa fa-circle-o text-yellow"></i> <span>课程推荐</span></a></li>--%>
<%--            </ul>--%>
<%--        </div>--%>
        <!-- 主体部分 -->

        <div class="public-main-right">

            <header class="nav-wrapper">
                <div class="main-right-header">
                    <div class="location">
                        <strong>课程管理</strong>
                        <span>课程列表</span>
                    </div>
                    <div class='main-right-header-right'>
                            <span class="">
                                <span style="font-weight: bolder">${thisAccount.roleName}</span>：${thisAccount.realName}
                            </span>

                        <span class="">
                            <a href="${pageContext.request.contextPath}/index.jsp">
                                <c:if test="${thisAccount.head!=''}">
                                    <img src="img/head/${thisAccount.head}" style="width: 25px">
                                </c:if>
                                <c:if test="${thisAccount.head==''}">
                                    <img src="img/head/initial.jpg" style="width: 25px">
                                </c:if>
                            </a>
                        </span >
                        <c:if test="${thisAccount!=null}">
                            <span class=""><a href="${pageContext.request.contextPath}/loginContoller/returnLogin">退出登录</a></span>
                        </c:if>
                        <c:if test="${thisAccount==null}">
                            <span class=""><a href="${pageContext.request.contextPath}/loginContoller/returnLogin">未登录，快快点击登录吧~</a></span>
                        </c:if>
                    </div>

                </div>
            </header>

            <form action="${pageContext.request.contextPath}/showCourseStyleList">
                <div class="search">
                    <span>课程名称:</span>
                    <input type="text" name="cName" placeholder="需要查询的内容" />

                    <button class="price" name="price">价格</button>

                    <span>上下架</span>
                    <select name="fukuan">
                        <option value="">--请选择--</option>
                        <option value="1">上架</option>
                        <option value="2">下架</option>
                        <option value="3">审核中</option>
                    </select>

                    <input type="submit" value="搜索" />
                    <input type="button" value="重置" onclick="javascrtpt:window.location.href='/showCourseStyleList'" />
                    <a href="courseStyleAdd.jsp" >增加课程</a>
                </div>
            </form>
            <!-- 主体搜索及增加框 -->
            <div class='main-right-content'>
                <!-- 以下容器均可修改，原有id和class别动，否则样式会变 -->

                <table class="providerTable" cellpadding="1" cellspacing="1">
                    <tr class="firstTr">
                        <th width="5%">序号</th>
                        <th width="10%">课程分类</th>
                        <th width="15%">课程封面</th>
                        <th width="10%">课程名称</th>
                        <th width="10%">价格</th>
                        <th width="10%">上下架</th>
                        <th width="10%">操作</th>
                    </tr>
                    <c:forEach items="${pageInfo.list}" var="course">
                    <tr>
                        <td>${course.cId}</td>
                        <td>${course.courseType.cType}课程>${course.teacher.tName}老师课程</td>
                        <td>
                        <img class="coursePic" src="${pageContext.request.contextPath}/img/course/${course.cPic}"/>
                        </td>
                        <td>${course.cName}</td>
                        <td>${course.price}</td>
                            <td>
                                <c:if test="${course.state == 1}"> 上架</c:if>
                                <c:if test="${course.state == 2}"> 下架</c:if>
                                <c:if test="${course.state == 3}"> 审核中</c:if>
                            </td>
                        <td>
                            <a href="/findCourseStyleById?cId=${course.cId}"><img src="${pageContext.request.contextPath}/img/read.png" alt="查看" title="查看" /></a>
                            <a href="/findUpdateStyleById?cId=${course.cId}"><img src="${pageContext.request.contextPath}/img/xiugai.png" alt="修改" title="修改" /></a>
                            <a href="javascript:void(0)" onclick="del(this,${course.cId})" id=""><img src="${pageContext.request.contextPath}/img/schu.png" alt="删除" title="删除" /></a>
                        </td>
                    </tr>
                    </c:forEach>

                </table>
                <div>
                    <nav aria-label="Page navigation" class="left">
                        <ul class="pagination">
                            <c:if test="${pageInfo.hasPreviousPage}">
                                <li>
                                    <a href="showCourseStyleList?page=${pageInfo.pageNum-1}" aria-label="Previous">
                                        <span aria-hidden="true">&laquo;</span>
                                    </a>
                                </li>
                            </c:if>
                            <c:forEach items="${pageInfo.navigatepageNums}" var="page">
                                <c:if test="${pageInfo.pageNum!=page}"> <li><a href="showCourseStyleList?page=${page}">${page}</a></li></c:if>
                                <c:if test="${pageInfo.pageNum== page}"> <li class="active"><a href="showCourseStyleList?page=${page}">${page}</a></li></c:if>
                            </c:forEach>
                            <c:if test="${pageInfo.hasNextPage}">
                                <li>
                                    <a href="showCourseStyleList?page=${pageInfo.pageNum+1}" aria-label="Next">
                                        <span aria-hidden="true">&raquo;</span>
                                    </a>
                                </li>
                            </c:if>
                        </ul>
                    </nav>
                </div>
            </div>
            <!--点击删除按钮后弹出的页面-->
            <div class="zhezhao"></div>
            <div class="remove" id="removeUse">
                <div class="removerChid">
                    <h2>提示</h2>
                    <div class="removeMain">
                        <p>你确定要删除该用户吗？</p>
                        <a href="javascript:void(0)" id="yes">确定</a>
                        <a href="/showCourseStyleList" id="no">取消</a>
                    </div>
                </div>
            </div>
            <footer>
                打牛蛙组教育集团
            </footer>
        </div>
    </section>
</div>

</div>

<!-- 每一页需加上slider，否则js动效无法显示 -->
<script src="${pageContext.request.contextPath}/js/slider.js"></script>
<!-- 每一页需加上slider，否则js动效无法显示 -->

<script type="text/javascript">
    // 模态框触发
    // new Vue({
    //     el: ".public-main-right",
    //
    //     methods: {
    //         addCourse: function() {
    //             $('#myModal').modal("show");
    //         }
    //     }
    // });

    //删除按钮
    var tr;
    var cId;

    function del(tr,cIds){
        $(".zhezhao").css('display','block');
        tr=$(tr).parent().parent();
        cId=cIds;
        $("#removeUse").fadeIn();
    }

        $('#yes').click(function (){
            $(".zhezhao").css('display','none');
            $("#removeUse").fadeOut();
            alert(cId);
            alert("您确认要删除吗?")
            $.ajax({
                url:"${pageContext.request.contextPath}/deleteCourseStyle",
                type:"post",
                data:{"cId":cId},
                dataType:"text",
                success:function(data){
                    alert(data);
                    if (data){
                        $(tr).parent().parent().remove();
                        alert("删除成功")
                    }else{
                        alert("删除失败");
                    }
                }
            })
        });



    // new Vue({
    //     url:"/showList",
    //     el:"#add",
    //     data:{
    //         showList:[],
    //
    //     }
    // })
    
    <%--function del() {--%>
    <%--    $.ajax({--%>
    <%--        url:"/showList",--%>
    <%--        type:"post",--%>
    <%--        dataType:"json",--%>
    <%--        data: {--%>
    <%--            cId:${course.cId}--%>
    <%--        },--%>
    <%--        success:function(delCid){--%>

    <%--        }--%>
    <%--    });--%>
    // }
</script>
</body>

</html>